<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<div id="app">
  <h2>数据变化之前
    <i style="color: #ababab;font-size: 14px;">
      * 指令v-once可以限制视图不再响应数据变化
    </i>
  </h2>
  <p v-once>{{ message }}</p>
  <p v-once>{{ noSpaceMsg }}</p>
  <h2>数据变化之后</h2>
  <p>{{ message }}</p>
  <p>{{ noSpaceMsg }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script type="text/javascript">
  let vm = new Vue({
    el: '#app',
    data () {
      return {
        message: 'WAS IT A CAR OR A CAT I SAW'
      }
    },
    computed: {
      noSpaceMsg: {
        set (value) {
          this.message = value
        },
        get () {
          return this.message.replace(/\s/g, '')
        }
      }
    }
  })
</script>
</body>
</html>